<include file="Public/newset-header" title="    " />
<link rel="stylesheet" href="__STATIC__/css/add.css">
<link rel="stylesheet" href="__STATIC__/css/cropper.min.css">
<link rel="stylesheet" href="__STATIC__/css/sitelogo.css">
<style type="text/css">
    .avatar-btns button {
        height: 35px;
    }
    .btn-success{background:#268df7;border:none;}
    .btn-success:hover{background:#268df7;}
</style>


<div class="container" style="padding-bottom:40px;">
        <ul class="breadcrumb">
                <li><a href="{:U('Index/index')}">首页</a></li>
                <li class="active">基本信息</li>

        </ul>
    <div class="row">
            <include file="Public/newset-sidebar" title="侧边栏" />
    <div class="col-md-9">
        <div class="headline">
            <h1>基本资料</h1>
        </div>
        <div class="message">
            <div class="messages-inner">
            <section>
                    <div class="user_pic">
                            <img src="__STATIC__/images/user-pic_03.png" style="width:100%;"/>
                    </div>
                    <button type="button" class="btn btn-primary"  data-toggle="modal" data-target="#avatar-modal">修改头像</button>
                    <div class="clear"></div>
                    <div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <form class="avatar-form">
                                    <div class="modal-header">
                                        <button class="close" data-dismiss="modal" type="button">&times;</button>
                                        <h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div class="avatar-body">
                                            <div class="avatar-upload">
                                                <input class="avatar-src" name="avatar_src" type="hidden">
                                                <input class="avatar-data" name="avatar_data" type="hidden">
                                                <label for="avatarInput" style="line-height: 35px;">图片上传</label>
                                                <button class="btn btn-danger"  type="button" style="height: 35px;" onclick="$('input[id=avatarInput]').click();">请选择图片</button>
                                                <span id="avatar-name"></span>
                                                <input class="avatar-input hide" id="avatarInput" name="avatar_file" type="file"></div>
                                            <div class="row">
                                                <div class="col-md-9">
                                                    <div class="avatar-wrapper"></div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="avatar-preview preview-lg" id="imageHead"></div>
                                                </div>
                                            </div>
                                            <div class="row avatar-btns">
                                                <div class="col-md-4">
                                                    <div class="btn-group">
                                                        <button class="btn btn-danger fa fa-undo" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees"> 向左旋转</button>
                                                    </div>
                                                    <div class="btn-group">
                                                        <button class="btn  btn-danger fa fa-repeat" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees"> 向右旋转</button>
                                                    </div>
                                                </div>
                                                <div class="col-md-5" style="text-align: right;">
                                                    <button class="btn btn-danger fa fa-arrows" data-method="setDragMode" data-option="move" type="button" title="移动">
                                                    <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)">
                                                    </span>
                                                  </button>
                                                  <button type="button" class="btn btn-danger fa fa-search-plus" data-method="zoom" data-option="0.1" title="放大图片">
                                                    <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, 0.1)">
                                                      <!--<span class="fa fa-search-plus"></span>-->
                                                    </span>
                                                  </button>
                                                  <button type="button" class="btn btn-danger fa fa-search-minus" data-method="zoom" data-option="-0.1" title="缩小图片">
                                                    <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, -0.1)">
                                                      <!--<span class="fa fa-search-minus"></span>-->
                                                    </span>
                                                  </button>
                                                  <button type="button" class="btn btn-danger fa fa-refresh" data-method="reset" title="重置图片">
                                                        <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;reset&quot;)" aria-describedby="tooltip866214"></span>
                                                   </button>
                                                </div>
                                                <div class="col-md-3">
                                                    <button class="btn btn-danger btn-block avatar-save fa fa-save" type="button" data-dismiss="modal"> 保存修改</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>
            </section>
                <form method="post" action="{:U('member/update')}">
            <section>
                <label>用户ID <span>*</span></label>
                <label class="text-input">
                    <input  class="form-control" type="text"  name="id" value="{$model.id}" readonly="readonly">
                    <i class="fa fa-user"></i>
                </label>
            </section>
            <section>
                    <label>登录邮箱 <span>*</span></label>
                    <label class="text-input">
                        <input class="form-control" type="text" name="username" value="{$model.username}" readonly="readonly">
                        <i class="fa fa-envelope-o"></i>
                    </label>
            </section>
            <section>
                    <label>手机号码 <span>*</span></label>
                    <label class="text-input">
                        <input class="form-control" type="text" name="phone" value="{$model.phone}" readonly="readonly">
                        <i class="fa fa-phone"></i>
                    </label>
            </section>

            <section>
                    <label>是否接收邮件</label>
                <select name="acceptthemail" id="acceptthemail">
                        <option value="">接收来自app之家的电子邮件</option>
                        <option value="">不接收来自app之家的电子邮件</option>
                </select>
            </section>
            <section>
                    <label>是否接收短信消息</label>
                <select name="acceptthesms" id="acceptthesms">
                        <option value="">接收来自app之家的短信消息</option>
                        <option value="">不接收来自app之家的短信消息</option>
                </select>
            </section>


            <hr>
            <div class="message-footer">
                <input type="hidden" name="id" value="{$model.id}">
                <button class="btn btn-success" type="submit" >确认修改</button>
            </div>
                </form>
            </div>
        </div>
    </div>

</div>
</div>
<include file="Public/newset-footer" />
<script src="__STATIC__/js/cropper.js"></script>
<script src="__STATIC__/js/sitelogo.js"></script>
<script src="__STATIC__/js/html2canvas.min.js"></script>
<script type="text/javascript">
    //做个下简易的验证  大小 格式
        $('#avatarInput').on('change', function(e) {
            var filemaxsize = 1024 * 5;//5M
            var target = $(e.target);
            var Size = target[0].files[0].size / 1024;
            if(Size > filemaxsize) {
                alert('图片过大，请重新选择!');
                $(".avatar-wrapper").childre().remove;
                return false;
            }
            if(!this.files[0].type.match(/image.*/)) {
                alert('请选择正确的图片!')
            } else {
                var filename = document.querySelector("#avatar-name");
                var texts = document.querySelector("#avatarInput").value;
                var teststr = texts; //你这里的路径写错了
                testend = teststr.match(/[^\\]+\.[^\(]+/i); //直接完整文件名的
                filename.innerHTML = testend;
            }
        });
        $(".avatar-save").on("click", function() {
            var img_lg = document.getElementById('imageHead');
            // 截图小的显示框内的内容
            html2canvas(img_lg, {
                allowTaint: true,
                taintTest: false,
                onrendered: function(canvas) {
                    canvas.id = "mycanvas";
                    //生成base64图片数据
                    var dataUrl = canvas.toDataURL("image/jpeg");
                    var newImg = document.createElement("img");
                    newImg.src = dataUrl;
                    imagesAjax(dataUrl)
                }
            });
        })

        function imagesAjax(src) {
            var data = {};
            data.img = src;
            data.jid = $('#jid').val();
            $.ajax({
                url: "upload-logo.php",
                data: data,
                type: "POST",
                dataType: 'json',
                success: function(re) {
                    if(re.status == '1') {
                        $('.user_pic img').attr('src',src );
                    }
                }
            });
        }
    </script>
